<template>
  <view class="pt-3">
    <view v-for="(key, name) in tableData" :key="name">
      <!-- 时间 -->
      <view class="mx-3 mb-3 flex bg-white">
        <text class="font ml-3 py-3">日期:{{ name }}</text>
      </view>
      <!-- 内容 -->
      <view
        @click="
          CheckGoods(
            obj.Article_SerialNumber,
            obj.Sales_Unit_Price_SerialNumber,
            obj.Store_SerialNumber,
            obj.Amount
          )
        "
        v-for="(obj, i) in key"
        :key="i"
        class="mx-3 mb-3 rounded-lg flex bg-white align-center"
      >
        <uni-swipe-action class="w-100">
          <uni-swipe-action-item
            @change="change"
            class="w-100"
            :right-options="options2"
            :show="isOpened"
            :auto-close="false"
            @click="bindClick(obj.Browse_SerialNumber)"
          >
            <view class="flex align-center w-100">
              <view class="flex-shrink">
                <image
                  class="m-2 rounded-lg"
                  style="width: 200rpx; height: 200rpx"
                  :src="Domain_IMG + obj.Picture_URL"
                  mode=""
                >
                </image>
              </view>
              <view
                class="flex justify-between flex-column py-2 w-100 pl-1 pr-3"
                style="height: 200rpx; position: relative"
              >
                <text
                  class="flex-shrink font-md font-weight-bold text-ellipsis-2"
                  >{{ obj.Article_Name }}</text
                >
                <view
                  class="mb-2 flex flex-column justify-between"
                  style="height: 50%"
                >
                  <view>
                    <text class="font text-white bg-info px-1 rounded"
                      >世纪华联</text
                    >
                  </view>
                  <view>
                    <text class="font-sm">品牌名称</text>
                  </view>
                  <view>
                    <text class="font-md font-weight-bold"
                      >￥{{ obj.Amount }}</text
                    >
                  </view>
                  <text
                    class="font-sm text-muted"
                    style="position: absolute; right: 20rpx; bottom: 20rpx"
                    >浏览时间：{{ obj.Date }}</text
                  >
                </view>
              </view>
            </view>
          </uni-swipe-action-item>
        </uni-swipe-action>
      </view>
    </view>
    <view class="text-center py-2 w-100">
      <text class="text-muted font-small">{{ BottomText }}</text>
    </view>
    <view
      @click="goTop"
      v-if="ReachBottom"
      class="bg-white"
      style="
        display: flex;
        align-items: center;
        justify-content: center;
        width: 120rpx;
        height: 120rpx;
        border-radius: 50%;
        overflow: hidden;
        position: fixed;
        bottom: 80rpx;
        right: 60rpx;
        box-shadow: 0 0 5rpx #000;
      "
    >
      <image
        style="width: 80%; height: 80%"
        :src="Domain_ICON + '/top.png'"
        mode=""
      ></image>
    </view>
  </view>
</template>

<script>
import { WeChatMemberBrowsing } from "../../api/WeChat.js";
import { GoodsInquiryKeyOriginal, WXEditAction } from "../../api/global.js";
import { WXSalesArticle } from "../../api/group.js";
import { nowtime } from "../../mixins/time.js";
const app = getApp();
export default {
  data() {
    return {
      Domain_IMG: app.globalData.Domain_IMG,
      Domain_ICON: app.globalData.Domain_ICON, //全局变量域名
      form: {
        Open_ID: app.globalData.openid,
        User_Type: "0",
        Enterprise_Info_SerialNumber: app.globalData.enterprise,
        page: 1,
        limit: 10,
        Mobile: true,
      },
      total: 0,
      BottomText: "下拉获取更多浏览记录",
      timer: null,
      ReachBottom: false,
      scrollY: 0,
      tableData: {},
      num: 0,
      isOpened: "none",
      isClose: false,
      options2: [
        {
          text: "删除",
          style: {
            backgroundColor: "#F56C6C",
          },
        },
      ],
      swiper: -1,
      loading: true,
    };
  },
  onLoad() {
    this.getRoutes(this.form);
  },
  onPageScroll(e) {
    this.scrollY = e.scrollTop;
  },
  onReachBottom() {
    if (this.BottomText != "暂无更多浏览记录") {
      //只要没拿到所有商品就继续发送请求
      this.form.page++;
      this.thorw();
    }
  },
  watch: {
    scrollY: function (newValue, oldValue) {
      if (newValue > 500) {
        this.ReachBottom = true;
      } else {
        this.ReachBottom = false;
      }
    },
  },
  methods: {
    async getRoutes(data) {
      uni.showLoading({
        title: "加载中...",
      });
      this.BottomText = "加载中...";
      const res = await WeChatMemberBrowsing(data);
      console.log(res);
      uni.hideLoading();
      this.total = Number(res.limit);
      this.tableData = res.tableData;
      for (let key in this.tableData) {
        this.num = this.num + this.tableData[key].length;
      }
      console.log(this.num);
      if (this.total == this.num) {
        this.BottomText = "暂无更多浏览记录";
      } else {
        this.BottomText = "下拉获取浏览记录";
      }
    },
    async CheckGoods(
      Sales_Unit_Price_SerialNumber,
      Article_SerialNumber,
      Store_SerialNumber,
      Sales_Unit_Price
    ) {
      let data = {
        Sales_Unit_Price_SerialNumber,
        Article_SerialNumber,
      };
      const res = await WXSalesArticle(data);
      console.log(res);
      if (res.Status == "success") {
        uni.navigateTo({
          url:
            "/pages/index/details?Article_SerialNumber=" +
            Article_SerialNumber +
            "&Sales_Unit_Price_SerialNumber=" +
            Sales_Unit_Price_SerialNumber +
            "&Store_SerialNumber=" +
            Store_SerialNumber +
            "&Sales_Unit_Price=" +
            Sales_Unit_Price +
            "&ShareOpenid=",
        });
      } else {
        uni.showToast({
          title: "该商品已下架",
          icon: "none",
        });
      }
    },
    async getRoutes1(data) {
      uni.showLoading({
        title: "加载中...",
      });
      this.BottomText = "加载中...";
      const res = await WeChatMemberBrowsing(data);
      console.log(res);
      uni.hideLoading();
      // for(let key in this.tableData){
      for (let key in res.tableData) {
        this.num = this.num + res.tableData[key].length;
        if (this.tableData.hasOwnProperty(key)) {
          this.tableData[key] = [...this.tableData[key], ...res.tableData[key]];
        } else {
          this.tableData[key] = res.tableData[key];
        }
      }
      // }
      // for(let key in res.tableData){
      //
      // }

      console.log(this.num);
      if (this.total == this.num) {
        this.BottomText = "暂无更多浏览记录";
      } else {
        this.BottomText = "下拉获取浏览记录";
      }
    },
    thorw(secend = 200) {
      //防抖函数
      this.timer = null;
      clearInterval(this.timer);
      this.timer = setTimeout(() => {
        this.getRoutes1(this.form);
      }, secend);
    },
    change(e) {
      console.log(e);
    },
    bindClick(e) {
      const this_ = this;
      uni.showModal({
        title: "系统提示",
        content: "确认删除这条浏览记录吗?",
        success(res) {
          if (res.confirm) {
            if (this_.loading) {
              this_.loading = false;
              let data = {
                Primary_Key_Name: "Browse_SerialNumber",
                Primary_Key: e,
                Data: "member_browsing_info",
              };
              this_.getOriginal(data);
            }
          }
          if (res.cancel) {
            this_.loading = true;
            uni.showToast({
              title: "已取消",
              icon: "none",
            });
          }
        },
      });
    },
    async getOriginal(data) {
      uni.showLoading({
        title: "删除中...",
      });
      const res = await GoodsInquiryKeyOriginal(data);
      console.log(res);
      res[0].User_Type = "1";
      let Data = {
        Data: JSON.stringify({
          Modify: {
            member_browsing_info: res,
          },
        }),
        Open_ID: app.globalData.openid,
      };
      this.EditBrows(Data);
    },
    async EditBrows(data) {
      const res = await WXEditAction(data);
      if (res.Status == "success") {
        uni.showToast({
          title: "已删除",
          icon: "success",
        });
      } else {
        uni.showToast({
          title: "删除失败!",
          icon: "error",
        });
      }
      uni.hideLoading();
      this.loading = true;
      console.log(this.isOpened);
      uni.redirectTo({
        url: "/pages/my/browse",
      });
    },
    goTop() {
      uni.pageScrollTo({
        scrollTop: 0,
      });
    },
  },
};
</script>

<style>
page {
  background-color: #f8f9fa;
}
</style>